<template>
  <div aria-label="A complete example of page header">
    <el-page-header @back="$router.go(-1)">
      <template #content>
        <div class="flex items-center">
          <span class="text-large font-600 mr-3"
            >{{ route.query.courseId ? "编辑" : "新建" }}课程
          </span>
        </div>
      </template>

   <!--    <template #extra>
        <div class="flex items-center">
          <el-button type="primary" class="ml-2">保存</el-button>
        </div>
      </template>
       -->
    </el-page-header>
  </div>

  <el-card >
    <template #header>
   
      <el-steps
    class="mb-4"
    :space="200"
    :active="currentStep"
    simple
  >
    <el-step title="基本信息" :icon="EditPen" @click= "currentStep=0"/>
    <el-step title="课程封面" :icon="Picture" @click= "currentStep=1"/>
    <el-step title="销售信息" :icon="Tools" @click="currentStep=2"/>
    <el-step title="医生信息" :icon="Document" @click="currentStep=3"/>
  </el-steps>

    </template>


      <el-form  :model="course">
        <div v-show="currentStep===0">

          <el-form-item label="课程名" prop="name">
            <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
            </el-form-item>
        </div>


        <div v-if="currentStep === 1">
    <el-form-item  prop="file">
      
                    <el-upload 
                               :on-progress="handleProgress"
                               v-model:file-list="fileList"
                               class="upload-demo"
                               :http-request="uploadFile"
                               :on-exceed="handleExceed"
                               :on-preview="handlePreview"
                               :on-remove="handleRemove"
                               list-type="picture-card"
                               limit="1"
                               :on-change="hanleChange"
                               :before-upload="beforeUpload"
                    >

                        <el-icon class="myPic">
                            <Plus/>
                        </el-icon>

                    </el-upload>
                </el-form-item>
  </div>



        <div v-show="currentStep===2"><h1>

          <el-form-item label="类型" prop="type">
          <el-select
            v-model="form.type"
            placeholder="请选择类型"
            size="medium"
            style="width: 180px"
            @change="confirmStatus"
          >
            <el-option
              v-for="item in vipList"
              :key="item.id"
              :label="item.type"
              :value="item.type"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="售价" prop="price" v-if="form.type === '付费'">
          <el-input v-model="form.price"></el-input>
        </el-form-item>


        </h1></div>


        <div v-show="currentStep===3"><h1>
          <el-form-item label="医院" prop="hospitalId">
          <el-select
            v-model="form.hospitalId"
            placeholder="请选择医院"
            size="medium"
            style="width: 180px"
            @change="selectDepartment"
          >
            <el-option
              v-for="item in hospitalList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="科室" prop="departmentId">
          <el-select
            v-model="form.departmentId"
            placeholder="请选择科室"
            size="medium"
            style="width: 180px"
            @change="findDockerByDepartmentId"
          >
            <el-option
              v-for="item in departmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="医生" prop="dockerId">
          <el-select
            v-model="form.dockerId"
            placeholder="请选择医生"
            size="medium"
            style="width: 180px"
            @change="confirmDocker"
          >
            <el-option
              v-for="item in dockerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        </h1></div>

          <div class="form-bottom">

            <el-button v-show="currentStep!==0" 
                @click="currentStep--"
            >上一步</el-button>
            <el-button v-show="currentStep!==3" 
                @click="currentStep++"
            >下一步</el-button>
            <el-button v-show="currentStep===3" type="primary" @click="save">保存</el-button>
          </div>

      </el-form>


  </el-card>


    
 
</template>

<script setup>
import emitter from "../utils/eventBus.js";
import { ElMessage } from "element-plus";
import SparkMD5 from "spark-md5";


import { VideoPause, VideoPlay ,UploadFilled,Plus} from "@element-plus/icons-vue";
import { ref, reactive, getCurrentInstance, nextTick ,onMounted} from "vue";
import axios from "axios";
const { appContext } = getCurrentInstance();
const request = appContext.config.globalProperties.request;
var uploadFileList = ref([]);
import { useRoute, useRouter } from "vue-router";
import { use } from "echarts";

import {EditPen ,Tools,Picture ,Clock ,Document} from  '@element-plus/icons-vue'

const router = useRouter();
const route = useRoute();

//步骤条当前位置


const currentStep = ref(0)
//表单

const form = ref({})

const formRef = ref()

const uploadFile = (params) => {
        //缓存文件
        form.value.file = params.file
    }



 const vipList = ref([
  { type: "全部免费" },
  { type: "会员免费" },
  { type: "付费" },
]);

const dockerList = ref([]);
const hospital = ref({});
const hospitalList = ref([]);
const departmentList  =ref([])
onMounted(async () => {
  const res = await axios.get("/hospital/findAll");
  hospitalList.value = res.data.data;
});

const selectDepartment = async () => {
 // findDockerByDepartmentId();
  const res = await axios.get(
    "/department/findByHospitalId/" + form.value.hospitalId
  );
  departmentList.value = res.data.data;
  form.value.departmentId = "";
  form.value.dockerId = "";
};
 
const findDockerByDepartmentId = async () => {
  const res = await axios.get(
    "/user/findByDepartmentId?departmentId=" + form.value.departmentId
  );
  dockerList.value = res.data.data;
  form.value.dockerId = "";
};


const save = async () => {
 // await formRef.value.validate();
  form.value.hospitalName = hospital.value.name;
  if (form.value.type === "全部免费") {
    form.value.type = 0;
    form.value.price = 0;
  }
  if (form.value.type === "会员免费") {
    form.value.type = 1;
    form.value.price = 0;
  }
  if (form.value.type === "付费") {
    form.value.type = 2;
  }

  let fd = new FormData();

  for (let key in form.value) {
    fd.append(key, form.value[key]);
  }
  /*fd.append('file', form.value.file)*/
  const res = await axios.post("/course/add", fd);
  ElMessage.success("添加课程成功");
    router.push('/admin/course')
};




</script>

<style scoped>
.main {
  margin-top: 40px;
  margin-bottom: 40px;
}
.uploading {
  padding-top: 27px;
}
.progress {
  /* width: 700px; */
  display: flex;
}
.uploading .parse {
  display: flex;
}
.parse .el-progress {
  /* font-size: 18px; */
  width: 590px;
}
.progress .el-progress {
  /* font-size: 18px; */
  width: 590px;
}
.uploading .fileName {
  font-size: 17px;
  margin-right: 40px;
  margin-left: 80px;

  /* width: 80px; */
}
.uploading .fileSize {
  font-size: 17px;

  /* width: 80px; */
}

.progress .uploadSpeed {
  font-size: 17px;
  margin-left: 5px;
  padding-left: 5px;
  padding-right: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text{
  font-style: 14px;
}

.item{
  margin-bottom: 18px;
}

.el-card {
  margin: 50px;
  margin-top: 53px;
}

.el-step{
  cursor: pointer;
}

.form-bottom{

  display: flex;
  justify-content: center;
  align-items: center;
}


.el-form-item{
  width: 500px;
  margin-left: 40%;
}

</style>
